<template>
	<view class="page">

		<view class="titer">
			<view class="left">
				全文润色
			</view>
			<view class="right">
				定制你的修改需求,一键生成合适文章！
			</view>
		</view>
		<view class="center">
			<view class="text">
				你在写些什么？
			</view>
			<view class="cen">
				<scroll-view class="scroll-X" scroll-x="true" style="width: 100%" :show-scrollbar='false'
					:scroll-with-animation="true">
					<view class='cen-s' v-for="(item,index) in tab" :key="index"
						:class="{'tab-item-select':index==selectIndex}" @click="itemTab(index)">
						<view class="tencr">
							<image :src="index == selectIndex?item.selectIcon : item.unSelectIcon" mode="widthFix"
								style="width: 40rpx;height: 40rpx;"></image>
							<view class="peo" :class="{'tab-item':index==selectIndex}">
								{{item.content}}
							</view>
						</view>

					</view>
				</scroll-view>
			</view>
			<u-radio-group v-model="value" @change="radioGroupChange">
				<scroll-view scroll-x="true" style="width: 100%;margin-left: -16rpx;" :show-scrollbar='false'
					:scroll-with-animation="true">
					<view style="display: flex;">
						<u-radio @change="radioChange" v-for="(item, index) in lists" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</view>
				</scroll-view>
			</u-radio-group>
		</view>
		<view class="footer">
			<view class="text">
				这篇文章的受众是什么？
			</view>
			<view class="cen">
				<u-checkbox-group placement="row" @change="checkboxChange" v-model="checkboxValue1">
					<scroll-view scroll-x="true" class="sclow">
						<view class="bes" style="display: flex;margin-top: 20rpx;">
							<u-checkbox :customStyle="{marginBottom: '8px',padding:'0 20rpx',color:'#7f7f7f'}"
								v-for="(item, index) in userr" :key="index" :label="item.name" :name="item.name">
							</u-checkbox>
						</view>
						<view class="bes" style="display: flex;margin-top: 25rpx;">
							<u-checkbox :customStyle="{marginBottom: '8px',padding:'0 20rpx'}"
								v-for="(item, index) in users" :key="index" :label="item.name" :name="item.name">
							</u-checkbox>
						</view>
					</scroll-view>

				</u-checkbox-group>
			</view>
		</view>
		<view class="footer">
			<view class="text">
				你期望的修改风格？
			</view>
			<view class="cen">
				<u-radio-group placement="row" v-model="valu">
					<scroll-view scroll-x="true" class="sclow">
						<view class="bes" style="display: flex;margin-top: 20rpx;margin-left: -9px;">
							<u-radio :customStyle="{marginBottom: '8px',color:'#7f7f7f'}" v-for="(item, index) in mastr"
								:key="index" :label="item.name" :name="item.name" @change="radioChan" shape="square">
							</u-radio>
						</view>
						<view class="bes" style="display: flex;margin-top: 25rpx;margin-left: -9px;">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in mastrs" :key="index"
								:label="item.name" :name="item.name" @change="radioChan" shape="square">
							</u-radio>
						</view>
					</scroll-view>

				</u-radio-group>
			</view>
		</view>
		<view class="centers">
			<view class="text">
				你在写些什么？
			</view>
			<view class="cen">
				<view class='cen-s' v-for="(item,index) in userTitle" :key="index"
					:class="{'tab-item-select':index==userIndex}" @click="itemUser(index)">
					<view class="tencr">
						<image :src="index == userIndex?item.unSelectIcon : item.selectIcon" mode="widthFix"
							style="width: 40rpx;height: 40rpx;"></image>
						<view class="peo" :class="{'tab-item':index==userIndex}">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			<view class="listFooter">
				改动浮动适中,可能会重写部分句子或段落，文章将变得更加流畅地道。
			</view>
		</view>
		<view class="button" style="height: 120rpx;">
			<view class="button_left">
				<u-button text="取消" color="#5490FF" size="large" @click="copyResults"></u-button>
			</view>
			<view class="button_right">
				<u-button text="保存" color="#1EB930" size="large" @click="saveNab"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		wycUrl,
	} from '@/api/assemb.js'
	export default {
		data() {
			return {
				selectIndex: 0,
				userIndex: 1,
				lists: [{
						name: '正剧',
						disabled: false,
						po: 0
					},
					{
						name: '悬疑剧',
						disabled: false,
						po: 0
					},
					{
						name: '喜剧',
						disabled: false,
						po: 0
					},
				],
				list: [{
						name: '正剧',
						disabled: false,
						po: 0
					},
					{
						name: '悬疑剧',
						disabled: false,
						po: 0
					},
					{
						name: '喜剧',
						disabled: false,
						po: 0
					},
					{
						name: '学术论文',
						disabled: false,
						po: 1
					},
					{
						name: '议论文',
						disabled: false,
						po: 1
					},
					{
						name: '作业',
						disabled: false,
						po: 1
					},
					{
						name: '自我介绍',
						disabled: false,
						po: 2
					},
					{
						name: '求职信',
						disabled: false,
						po: 2
					},
					{
						name: '个人陈述',
						disabled: false,
						po: 2
					},
					{
						name: '个人简历',
						disabled: false,
						po: 2
					},
					{
						name: '沟通邮件',
						disabled: false,
						po: 3
					},
					{
						name: '通知邮件',
						disabled: false,
						po: 3
					},
					{
						name: 'OKR文档',
						disabled: false,
						po: 3
					},
					{
						name: '技术文档',
						disabled: false,
						po: 3
					},
					{
						name: '法律文书',
						disabled: false,
						po: 3
					},
					{
						name: '合同文书',
						disabled: false,
						po: 3
					},
					{
						name: '产品介绍',
						disabled: false,
						po: 4
					},
					{
						name: '活动通知',
						disabled: false,
						po: 4
					},
					{
						name: '广告文案',
						disabled: false,
						po: 4
					},
					{
						name: '日记',
						disabled: false,
						po: 5
					},
					{
						name: '短信息',
						disabled: false,
						po: 5
					},
					{
						name: '新闻稿件',
						disabled: false,
						po: 5
					},
					{
						name: '博客',
						disabled: false,
						po: 5
					},
					{
						name: '小说',
						disabled: false,
						po: 5
					},
					{
						name: '散文',
						disabled: false,
						po: 5
					},
					{
						name: '诗歌',
						disabled: false,
						po: 5
					},
					{
						name: '剧本',
						disabled: false,
						po: 5
					}
				],
				user: [],
				userr: [],
				users: [],
				mast: [],
				mastr: [],
				mastrs: [],
				tab: [],
				userTitle: [{
						title: '润色',
						selectIcon: '/static/seting/1a.png',
						unSelectIcon: '/static/seting/1b.png',
						// image: '/static/home/tnt.png',
					},
					{
						title: '改写',
						selectIcon: '/static/seting/2a.png',
						unSelectIcon: '/static/seting/2b.png',
					},
					{
						title: '创意',
						selectIcon: '/static/seting/3a.png',
						unSelectIcon: '/static/seting/3b.png',
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '正剧',
				valu: '正式',
				checkboxValue1: ['领导'],
				coper: '学术论文',
				coper1: '领导',
				coper2: '正式'
			};
		},
		onLoad(e) {
			console.log(e.writing)
			this.getUserInfo()
		},
		methods: {
			copyResults() {
				uni.navigateBack()
			},
			//确认选完跳转
			saveNab() {
				if (this.coper1 == '') {
					uni.showToast({
						title: '请选择受众群体',
						icon: 'none'
					})
				} else {
					// const conditions = [this.coper,this.coper1,this.coper2]
					// uni.navigateTo({
					// 	url: '../aiWriting/aiWriting?text=' + this.coper + '&title=' + this.coper1 + '&coper=' + this.coper2

					// })
					// console.log(conditions)
					let pages = getCurrentPages(); // 当前页页⾯实例
					let nowPage = pages[pages.length - 1]; //当前页⾯实例
					let prevPage = pages[pages.length - 2]; // 上一页面实例
					// 需要返回 上一页的数据 Object
					let object = {
						text: this.coper,
						title: this.coper1.toString(),
						coper: this.coper2,
						index: this.userIndex
					};

					prevPage.$vm.prevDateFun(object) // 调用上一页 定义的方法

					// 返回 上一页
					uni.navigateBack({
						delta: 1 // 可以不写，默认值为 1
					})

				}

			},
			itemTab(index) {
				let that = this
				that.selectIndex = index
				that.lists = []
				that.list.forEach(item => {
					if (item.po == that.selectIndex) {
						that.lists.push(item);
					}
				})
			},
			itemUser(index) {
				let that = this
				that.userIndex = index
			},
			getUserInfo() {
				let param = {
					content: 'wirteSetting'
				}
				wycUrl(param, 1018, 'getDictInfo').then((res) => {
					if (res.data.code == 200) {
						// JSON.stringify(res.data)
						this.tab = JSON.parse(res.data.data).articleType
						console.log(this.tab, '渲染的数据')
						let cs = JSON.parse(res.data.data).reader
						let bs = JSON.parse(res.data.data).style
						cs.forEach(item => {
							let arr = {
								name: item
							}
							this.user.push(arr)
						})
						bs.forEach(item => {
							let crr = {
								name: item
							}
							this.mast.push(crr)
						})
						this.userr = this.user.slice(0, 7)
						this.users = this.user.slice(8)
						this.mastr = this.mast.slice(0, 8)
						this.mastrs = this.mast.slice(9)
					}

				})
			},
			//多选
			checkboxChange(e) {
				this.coper1 = e
			},

			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				this.coper = e
			},
			radioChan(e) {
				this.coper2 = e
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #f5f5f5;
	}

	/deep/.u-radio-group {
		margin-top: 33rpx !important;
		// display: inline-block;
		// margin-left: 20rpx !important;
	}

	/deep/.u-radio {
		margin-left: 40rpx;
		color: #333333;
		font-size: 29rpx;
	}

	/deep/.u-button {
		border-radius: 12rpx !important;
	}

	.titer {
		width: 706rpx;
		height: 124rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
		overflow: hidden;

		.left {
			background: #FFFFFF;
			border-radius: 12rpx;
			margin-top: 17rpx;
			margin-left: 20rpx;
		}

		.right {
			width: 441rpx;
			height: 25rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #9A9A9A;
			margin-top: 17rpx;
			margin-left: 20rpx;
		}
	}

	.footer {
		width: 706rpx;
		height: 238rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		overflow: hidden;

		.cen {
			margin-top: 20rpx;
			height: 140rpx;

			.sclow {
				white-space: nowrap;
				height: 140rpx;
			}
		}

		.text {
			height: 29rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-top: 33rpx;
			margin-left: 20rpx;
		}
	}

	.center {
		width: 706rpx;
		height: 312rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		overflow: hidden;

		.text {
			height: 29rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-top: 33rpx;
			margin-left: 20rpx;
		}

		.cen {
			height: 80rpx;
			// display: flex;
			// justify-content: space-around;
			margin-top: 40rpx;

			.scroll-X {
				width: 100%;
				height: 100%;
				white-space: nowrap;

				.swiper {
					display: flex;
					justify-content: space-around;
				}
			}

			.tab-item-select {
				background: #4486FF !important;
				color: white;
			}

			.cen-s {
				margin-left: 20rpx;
				height: 74rpx;
				background: #F5F9FF;
				border-radius: 12rpx;
				display: inline-block;
				width: 29%;

				.tencr {
					display: flex;
					width: 100%;
					height: 100%;
					align-items: center;
					justify-content: center;

					// image{
					// 	margin-top: 10rpx;
					// 	    margin-left: 10rpx;
					// }
					.tab-item {
						color: white !important;
					}

					.peo {
						font-size: 29rpx;
						color: #333333;
						// margin-top: 15rpx;
						// margin-left: 10rpx;
					}
				}
			}
		}
	}

	.button {
		margin-top: 40rpx;
		width: 100%;
		display: flex;
		justify-content: space-evenly;

		.button_left {
			width: 44%;
		}

		.button_right {
			position: relative;
			width: 44%;

			.right_other {
				display: flex;
				align-items: center;
				position: absolute;
				top: -21rpx;
				right: 0;
				width: 154rpx;
				height: 42rpx;
				background: #FF6600;
				border-radius: 21rpx 0rpx 0rpx 21rpx;

				text {
					line-height: 42rpx;
					margin-left: 18rpx;
					font-size: 18rpx;
					font-family: PingFang SC;
					color: #FFFFFF;
				}
			}
		}
	}

	.centers {
		width: 706rpx;
		height: 269rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		overflow: hidden;

		.text {
			height: 29rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-top: 20rpx;
			margin-left: 20rpx;
		}

		.listFooter {
			width: 644rpx;
			height: 64rpx;
			font-size: 25rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #848484;
			line-height: 40rpx;
			margin-left: 30rpx;
			margin-top: 10rpx;
			// width: 706rpx;
			// height: 312rpx;
			// background: #FFFFFF;
			// border-radius: 12rpx;
		}

		.cen {
			height: 80rpx;
			margin-top: 33rpx;

			.tab-item-select {
				// background: #4486FF !important;
				border: 0.6rpx solid #4486FF !important;
				color: white;
			}

			.cen-s {
				margin-left: 20rpx;
				height: 74rpx;
				border: 0.6rpx solid #CCCCCC;
				// background: #F5F9FF;
				border-radius: 12rpx;
				display: inline-block;
				width: 29%;

				.tencr {
					display: flex;
					width: 100%;
					height: 100%;
					align-items: center;
					justify-content: center;

					// image{
					// 	margin-top: 10rpx;
					// 	    margin-left: 10rpx;
					// }
					.tab-item {
						color: #4486FF !important;
					}

					.peo {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						// margin-top: 15rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>